<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/

</style>
<template>
  <div class="sendcar">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      派车信息
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
        <form action="/api/sellform/add" method="post" id="formid">
        <input  name="farepricetype"  id="farepricetype"   :value="adata.farepricetype"   type="hidden"  />
         <input  name="guid"  id="guid"   type="hidden"  :value="guid" />
          <input  name="sellType"  id="sellType"   type="hidden"  value="sendCar" />
        <input  name="wlcompanyguid"  id="wlcompanyguid"  :value="adata.wlcompanyguid"   type="hidden"  />
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">订单编号</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly id="sellcode" :value="adata.sellcode" name="sellcode" placeholder="请输入订单编号">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">申请人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" id="applyname" readonly  type="text"  name="applyname" :value="adata.applyname" placeholder="请输入申请人">
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">是否压车</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" id="unloaddesc" readonly="true" name="unloaddesc" :value="adata.unloaddesc" placeholder="请选择是否压车" >-->

<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="cellgroup">
          <div class="weui-cell fir">
            <div class="weui-cell__hd"><label class="weui-label">发货联系人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input"   id="delicontact" name="delicontact" :value="adata.delicontact"  placeholder=" 请输入发货联系人">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" id="delicontacttel" name="delicontacttel" :value="adata.delicontacttel"  placeholder=" 请输入发货人手机号">
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd"><label id='unqualifiedchkrateDiv' class="weui-label">发货地址</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id='deliprovince' name="deliprovince" >
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd"><label  class="weui-label">详细地址</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id='deliaddress' name="deliaddress" :value="adata.deliaddress" placeholder=" 请输入发货详细地址">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">收货联系人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input"   id="arricontact" name="arricontact" :value="adata.arricontact"  placeholder="请输入收货联系人">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" id="arricontacttel" name="arricontacttel" :value="adata.arricontactno"  placeholder=" 请输入收货人手机号">
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd"><label   class="weui-label">收货地址</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id='arriprovince' name="arriprovince" >
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd"><label  class="weui-label">详细地址</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id='arriaddres' name="arriaddres" :value="adata.arriaddres" placeholder=" 请输入收货详细地址">
            </div>
          </div>
        </div>

        <div class="weui-cell fir">
          <div class="weui-cell__hd"><label class="weui-label">物流公司</label></div>
          <div class="weui-cell__bd">
            <input class="weui-select" type="text" id="wlcompany" name="wlcompany" :value="adata.wlcompany"  placeholder="请输入物流公司" >
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">司机电话</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="driverphone" @blur="getWLDriver()" name="driverphone" :value="adata.driverphone" placeholder="请输入司机联系电话" >
          </div>
        </div>

        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">司机姓名</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" required id="drivername" name="drivername" :value="adata.drivername" placeholder="请输入司机姓名">
          </div>
        </div>

        <!--        <div class="weui-cell">-->
        <!--          <div class="weui-cell__hd"><label class="weui-label">车牌号</label></div>-->
        <!--          <div class="weui-cell__bd">-->
        <!--            <input class="weui-input" type="text" id="carcode" name="carcode" :value="adata.carcode" placeholder="请输入车牌号">-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label" id="acts">车牌号</label></div>
          <div class="weui-cell__bd">
            <input class="weui_input" name="carcode"  id="carcode" :value="adata.carcode"
                   type="hidden" placeholder="请输入车牌号">
            <div class="car_input">
              <ul class="clearfix ul_input">
                <li class="input_pro"><span id="cn0"></span></li>
                <li class="input_pp input_zim"><span id="cn1"></span></li>
                <li class="input_pp"><span id="cn2"></span></li>
                <li class="input_pp"><span id="cn3"></span></li>
                <li class="input_pp"><span id="cn4"></span></li>
                <li class="input_pp"><span id="cn5"></span></li>
                <li class="input_pp"><span id="cn6"></span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="weui-cells weui-cells_form">
          <!--          <div class="weui-cell">-->
          <!--            <div class="weui-cell__hd"><label class="weui-label">运价方式</label></div>-->
          <!--            <div class="weui-cell__bd">-->
          <!--              -->
          <!--            </div>-->
          <!--          </div>-->
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">运价</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" id="fareprice" name="fareprice" :value="adata.fareprice"  placeholder="运价" style="width: 45%;">
              <input class="weui-select" type="text" id="farePriceTypeC" name="farePriceTypeC" :value="adata.farepricetypename"  placeholder="运价方式" style="width: 51%; padding-left: 0;">
            </div>
          </div>
        </div>

        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"  href="javascript:" @click="send">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SendCar',
    data () {
      return {
        guid : "",
        nodeid: '',
        status: '',
        adata: {}
      }
    },
    created() {
    },
    mounted () {
      if(location.href.indexOf("&reloaded")==-1){
        location.href=location.href+"&reloaded";
        location.reload();
      }
      // //编辑车牌号后赋值
      // $(".input_pp span").bind("DOMNodeInserted",function(e){
      //   var car = $('#cn0').text() + $('#cn1').text() + $('#cn2').text() + $('#cn3').text() + $('#cn4').text() + $('#cn5').text() + $('#cn6').text();
      //   $('#code').val(car);
      // })

      let that = this;
      this.guid = this.$route.query.guid;
      this.nodeid = this.$route.query.nodeid;
      //this.guid = this.$parent.getQueryVariable('guid');
      console.log('guid:', this.guid)

      //获取回显数据
      $.ajax({
        url: '/sales/Sellform!toSendCar.action',
        data: {guid:that.guid},
        type: "post",
        dataType: "json",
        success: function(res) {
          if (res.info != undefined) {
            that.adata = res.info;
            $('#orgguid').val(res.info.orgguid);
            $('#deliprovince').val(res.info.deliprovince + " " + res.info.delicity + " " +res.info.delidistrict);
            $('#arriprovince').val(res.info.arriprovince + " " + res.info.arricity + " " +res.info.arridistrict);
            $('#farepricetype').val(res.info.farepricetype);
            that.loadCarCode(res.info.carcode);
            that.adata.farepricetype = res.info.farepricetype;
          } else {
            this.toastError('系统出现异常!');
          }
        },
        complete: function () {

        }
      });



      //获取回显数据
      $.ajax({
        url: '/sales/Sellform!getWlCompany.action',
        data: {},
        type: "post",
        dataType: "json",
        success: function(res) {
          if (res.info != null) {
            var data = res.info.result;
            data = eval('(' + data+ ')');
            var datalist = new Array;
            $.each( data.result, function( index, itsm ) {
              var info = { "title": itsm.name, "value": itsm.guid };
              datalist.push(info);
            });

            $('#wlcompany').select({
              title: "物流公司",
              items: datalist,
              onChange: function (data) {
                $('input[name="wlcompanyguid"]').val($('#wlcompany').data('values'));
              }
            });
          } else {
            this.toastError('系统出现异常!');
          }
        },
        complete: function () {

        }
      });





      //获取回显数据
      $.ajax({
        url: '/sales/Sellform!getDictEmnu.action',
        data: {dicttype:"20"},
        type: "post",
        dataType: "json",
        success: function(res) {
          if (res.info != null && res.info != 'error') {
            var data = res.info;
            console.log("data",data);
            var datalist = new Array;
            $.each( data, function( index, itsm ) {
              var info = { "title": itsm.dicttext, "value": itsm.dictkey };
              datalist.push(info);
              if( $('#farepricetype').val() == itsm.dictkey){
                $('#farePriceTypeC').val(itsm.dicttext);
              }
            });
            $('#farePriceTypeC').select({
              title: "运价方式",
              items: datalist,
              onChange: function (data) {
                $('input[name="farepricetype"]').val($('#farePriceTypeC').data('values'));
              }
            });
          } else {
            that.toastError('系统出现异常!');
          }
        },
        complete: function () {

        }
      });

      $("#deliprovince").cityPicker({
        title: "请选择发货地址",
      });
      $("#arriprovince").cityPicker({
        title: "请选择收货地址"
      });


      //编辑车牌号后赋值
      $(".input_pp span").bind("DOMNodeInserted",function(e){
        var car = $('#cn0').text() + $('#cn1').text() + $('#cn2').text() + $('#cn3').text() + $('#cn4').text() + $('#cn5').text() + $('#cn6').text();
        console.log("carcode",car);
        $('#carcode').val(car);
      })



    },
    methods: {
        send: function() {
        if(!checkSubmit()){
          return;
        }
          //防止重复提交
          $('.subbtn').attr("disabled",true).css("pointer-events","none");

        this.axios({
          method: 'post',
          responseType: 'json',
          headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" },
          url: '/sales/Sellform!sendCar.action?nodeid=' + this.nodeid,
          params: this.serialize2Obj($("#formid").serializeArray())
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");

          console.log(response.data.info);
          if(response.data.info == "ok"){
            this.toastSuccess('操作成功!');
          } else if (response.data.info == 'canotopt') {
            this.toastError('不允许的操作！');
          }else{
            this.toastError('操作失败!');

          }
          this.$router.push({name: 'Sellform'});
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          this.toastError('系统错误');
        });

      },
      serialize2Obj: function (data) {
        var obj = {};
        $.each(data,function(i,v){
          obj[v.name] = v.value;
        })
        return obj;
      },

      getWLDriver:function(){
        this.axios({
          method: 'post',
          responseType: 'json',
          headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" },
          url: '/sales/Sellform!getWlDriver.action',
          params: {mobilephone:$('#driverphone').val()}
        }).then(response => {
          var res = response.data.info;
          if (res.result != null) {
            var res = res.result;
            res = eval(';(' + res + ')');
            res = res.result[0];
            $('#drivername').val(res.drivername);
            $('#carcode').val(res.code);
            var carCode = res.code;
            this.loadCarCode(carCode);
          }
        });
      },
      loadCarCode :function (carCode){
        $('#cn0').text(carCode.substring(0,1));
        $('#cn1').text(carCode.substring(1,2));
        $('#cn2').text(carCode.substring(2,3));
        $('#cn3').text(carCode.substring(3,4));
        $('#cn4').text(carCode.substring(4,5));
        $('#cn5').text(carCode.substring(5,6));
        $('#cn6').text(carCode.substring(6,7));

      }
    }
  }

  /**
   * 提交之前的校验
   */
  function checkSubmit(){

    //物流公司
    if(isEmpty("drivername")){
      alert("请填写司机姓名");
      return false;
    }
    if(isEmpty("driverphone")){
      alert("请填写司机电话");
      return false;
    }
    if(isEmpty("carcode")){
      alert("请填写车牌号");
      return false;
    }
    if(isEmpty("farePriceType")){
      alert("请选择运价方式");
      return false;
    }

    if(isEmpty("fareprice")){
      alert("请填写运价");
      return false;
    }




    if(isEmpty("delicontact")){
      alert("请填写发货联系人");
      return false;
    }
    if(isEmpty("delicontacttel")){
      alert("请填写发货联系人手机号");
      return false;
    }
    if(isEmpty("deliprovince")){
      alert("请填写发货地址");
      return false;
    }
    if(isEmpty("deliaddress")){
      alert("请填写发货详细地址");
      return false;
    }


    if(isEmpty("arricontact")){
      alert("请填写收货联系人");
      return false;
    }
    if(isEmpty("arricontacttel")){
      alert("请填写收货联系人手机号");
      return false;
    }if(isEmpty("arriprovince")){
      alert("请填写收货地址");
      return false;
    }if(isEmpty("arriaddres")){
      alert("请填写详细收货地址");
      return false;
    }
    return true;
  }

  function isEmpty(domID){

    return $('#' + domID).val() == "" || $('#' + domID) == null;
  }


</script>
